<template>
  <div class="bg-light-50 overflow-scroll rounded-xl">
    <div class="w-full mt-4">
    </div>
    <div class="w-full flex flex-wrap ml-2" v-if="!pending">
      <div v-for="item, index in data?.data" :key="index" class="p-2 w-1/4">
        <HomeAlbumCard :_id="item.id" :title="item.name" :cover="item.cover" :auther="[item.auther]"
          @click="router.push(`/album/${item.id}`)" />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
// 导入数据
import { watch } from 'vue';
const router = useRouter()
interface NewAlbum {
  code: string,
  message: string,
  data: {
    id: string,
    name: string,
    cover: string,
    auther: {
      id: string,
      name: string,
    }
  }[]
}
const { data, pending } = await useFetch<NewAlbum>('/api/album/newAlbum')

watch(data, (newvalue, oldvalue) => {
  if (newvalue != oldvalue) {
  }
});
</script>
<style lang="less">
.true {
  font-weight: 700;
  border-bottom: red solid 3px;
  font-size: medium;
  border-style: groove;
}

.false {
  font-weight: 500;
}
</style>
